<template>
	<!-- 安全巡检 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">安全巡检统计分析</text></view>
				</template>

				<up-subsection mode="subsection" :list="[{ name: '近7天' }, { name: '近30天' }]" :current="current"
					@change="fn1" />

				<view class="charts-box" :key="current">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
				<view class="charts-box" :key="current">
					<qiun-data-charts type="line" ontouch :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>

			<!-- 	<u-collapse-item name="2" >
				<template #title>
					<view class="content-item-title"><text class="title-txt">巡检点位</text></view>
				</template>

				<view class="flex s-center m-b-10">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索" v-model="searchVal"
							bgColor="#f5f9fd" @clear="fn2" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" @click="fn2" text="搜索" />
				</view>

				<my-scroll style="height:350px" @scrolltolower="scrolltolower">
					<template v-if="tableList.length">
						<view class="scroll-item" v-for="(data,i) in tableList" :key="i" :class="{ 'm-t-10' : i>0 }">
							<view class="flex f-s-18">
								<up-icon name="warning" color="#2979ff" size="18" />
								<up-text :text="data['巡检点名称']" lines='1' color="#333333" />
							</view>
							<view class="flex s-end">
								<view class="f1 w0">
									<view class="flex m-y-5">
										所在区域：
										<up-text :text="data['所在区域']" lines='1' color="#7F899F" />
									</view>
									<view class="flex">
										巡检路线：
										<up-text :text="data['巡检路线']" lines='1' color="#7F899F" />
									</view>
								</view>
								<up-tag :text="data.巡检周期" plain size="mini" type="info" v-if='data.检查周期' />
							</view>
						</view>
					</template>
					<up-empty mode="list" v-else />
				</my-scroll>
			</u-collapse-item> -->

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">风险点</text></view>
				</template>

				<view class="p-10 b-r-4 m-b-10 flex m-between s-center" style="background: #F5F7FE;">
					<view class="flex s-center fw f-s-18">
						<image :src="getImgUrl('gj.png')" mode="widthFix" :style="{'width':'40rpx'}" class="m-r-5" />
						风险点数量
					</view>
					<view class="flex s-center">
						<up-count-to bold class="m-r-5" :endVal="total" color="#0052D9" />条
					</view>
				</view>

				<view class="flex s-center m-b-10">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索" v-model="searchVal1"
							bgColor="#f5f9fd" @clear="fn3" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" text="搜索" @click="fn3" />
				</view>

				<my-scroll style="height:450px" @scrolltolower="scrolltolower1">
					<template v-if="tableList1.length">
						<view class="scroll-item" v-for="(data,i) in tableList1" :key="i" :class="{ 'm-t-10' : i>0 }">
							<view class="flex f-s-18">
								<up-icon name="warning" color="#2979ff" size="18" />
								<up-text :text="data['风险点名称']" lines='1' color="#333333" />
							</view>
							<view class="flex s-end">
								<view class="f1 w0">
									<view class="flex m-y-5">
										巡检项：
										<up-text :text="data['巡检项']" lines='1' color="#7F899F" />
									</view>
									<view class="flex">
										区域：
										<up-text :text="data['区域']" lines='1' color="#7F899F" />
									</view>
									<view class="flex">
										负责人：
										<up-text :text="data['负责人']" lines='1' color="#7F899F" />
									</view>
								</view>
								<up-tag :text="data.风险点类型" plain size="mini" type="info" />
							</view>
						</view>
					</template>
					<up-empty mode="list" v-else />
				</my-scroll>
			</u-collapse-item>

			<!-- 	<u-collapse-item name="4">
				<template #title>
					<view class="content-item-title"><text class="title-txt">巡检人员</text></view>
				</template>
				<view class="flex s-center m-b-10">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索" v-model="searchVal2"
							bgColor="#f5f9fd" @clear="fn4" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" text="搜索" @click="fn4" />
				</view>

				<my-scroll style="height:350px" @scrolltolower="scrolltolower2">
					<template v-if="tableList2.length">
						<view class="scroll-item" v-for="(data,i) in tableList2" :key="i" :class="{ 'm-t-10' : i>0 }">
							<view class="flex f-s-18 m-between">
								<view class="flex f1 w0 m-r-5">
									<up-icon name="calendar" color="#2979ff" size="18" />
									<up-text :text="data['检查项目']" lines='1' color="#333333" />
								</view>
								<up-tag :text="data.检查周期" plain size="mini" type="info" v-if='data.检查周期' />
							</view>
							<template v-for="item in ['部门名称','岗位名称']" :key='item'>
								<view class="flex m-y-5">
									{{item}}：
									<up-text :text="data[item]" lines='1' color="#7F899F" />
								</view>
							</template>
							<view class="flex m-y-5">
								检查内容：
								<up-text :text="data['检查内容']" color="#7F899F" />
							</view>
						</view>
					</template>
					<up-empty mode="list" v-else />
				</my-scroll>
			</u-collapse-item> -->
		</u-collapse>
	</view>
</template>

<script setup>
	import {
		getApiFabric,
	} from "@/api/customApi";

	const collapse = ref(null),
		showMoreKeys = ref([0, 1, 2, 3, 4]);

	/******************************************安全巡检统计分析***************************************/

	const current = ref(0),
		chartData = ref({}),
		opts = ref({
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: "top",
				padding: 0,
				margin: 0,
				fontSize: 10,
				itemGap: 0,
			},
			title: {
				name: "0",
				fontSize: 30,
				color: "#000",
				offsetY: -5,
			},
			subtitle: {
				name: "完成率",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
				}
			}
		})
	let chartData1 = ref({}),
		opts1 = {
			color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
			padding: [10, 0, 0, 0],
			enableScroll: true,
			legend: {
				position: 'top',
				show: true
			},
			xAxis: {
				disableGrid: true,
				calibration: true,
				labelCount: 4,
				itemCount: 7,
			},
			yAxis: {
				gridType: 'dash',
				showTitle: true,
				data: [{
					min: 0,
					title: '个',
					titleOffsetX: -10,
					titleOffsetY: -5
				}]
			},
			extra: {
				line: {
					type: "straight",
					width: 2,
					activeType: "hollow"
				}
			}
		};

	function fn1(index = 0) {
		let params = {}
		current.value = index;
		if (current.value == 1) {
			params = {
				code: "type",
				value: "2"
			}
		}
		chartData.value = {};
		getApiFabric({
			apiCode: "4672467b-b3b1-4fbf-be8f-afc2d59c1dd5",
			params: [params],
			propertyMapping: {
				name: "s",
				value: "y"
			}
		}).then((res) => {
			const data = ArrayToObj(res.data, {
				key: 'name',
				val: 'value'
			});
			if (data['计划完成数'] == 0) {
				opts.value.title.name = '100%'
			} else {
				opts.value.title.name = ((data['实际完成数'] / data['计划完成数']) * 100).toFixed(1) + '%'
			}
			chartData.value = JSON.parse(JSON.stringify({
				series: [{
					data: res.data
				}]
			}));
		})
		chartData1.value = {};
		getApiFabric({
			params: [params],
			apiCode: "51f19e3c-f581-4daa-8303-66f4c3beca61",
			propertyMapping: {
				x: "dateStr",
				y1: "planTaskCount",
				y2: "successTaskCount"
			}
		}).then((res) => {
			const groups = res.data.reduce((groups, person) => {
				groups.categories.push(person.x);
				groups.y1.push(person.y1);
				groups.y2.push(person.y2);
				return groups;
			}, {
				categories: [],
				y1: [],
				y2: []
			});

			chartData1.value = JSON.parse(JSON.stringify({
				categories: groups.categories,
				series: [{
					name: '计划完成数',
					data: groups.y1
				}, {
					name: '实际完成数',
					data: groups.y2
				}]
			}))
		})
	}

	/********************************************风险点位列表*******************************************/
	let searchVal = ref(),
		tableData = [],
		tableList = ref([]);

	function fn2() {
		getApiFabric({
			apiCode: "c45e94e4-d32c-4fef-b078-22ca8ab97933",
			pageIndex: 1,
			pageSize: 15,
			params: [{
				code: "checkItemName",
				value: searchVal.value
			}, {
				code: "pageIndex",
				value: 1
			}, {
				code: "pageSize",
				value: 15
			}, {
				code: "total",
				value: true
			}],
			propertyMapping: {
				巡检点名称: "checkItemName",
				所在区域: "areaName",
				巡检路线: "riskName",
				巡检周期: "checkCycle"
			},
			total: true
		}).then((res) => {
			tableData = res.data;
			tableList.value = tableData.slice(0, 10);
		})
	}

	function scrolltolower() {
		if (tableList.value.length < tableData.length) {
			tableList.value.push(...tableData.slice(tableList.value.length, tableList.value.length + 10))
		}
	}

	/********************************************风险点列表*******************************************/
	let searchVal1 = ref(),
		tableData1 = [],
		tableList1 = ref([]);

	function fn3() {
		getApiFabric({
			apiCode: "814674e0-2f7a-41ef-9d8f-b01878652113",
			pageIndex: 1,
			pageSize: 15,
			params: [{
				code: "riskName",
				value: searchVal1.value
			}, {
				code: "pageIndex",
				value: 1
			}, {
				code: "pageSize",
				value: 15
			}, {
				code: "total",
				value: true
			}],
			propertyMapping: {
				风险点名称: "riskName",
				风险点类型: "riskType",
				巡检项: "checkItemCount",
				区域: "areaName",
				负责人: "userName"
			},
			total: true
		}).then((res) => {
			tableData1 = res.data;
			tableList1.value = tableData1.slice(0, 10);
			nextTick(() => {
				collapse.value.init()
			})
		})
	}

	function scrolltolower1() {
		if (tableList1.value.length < tableData1.length) {
			tableList1.value.push(...tableData1.slice(tableList1.value.length, tableList1.value.length + 10))
		}
	}

	const total = ref(0)

	function fn5() {
		getApiFabric({
			apiCode: "3c6c1abe-e10c-4491-a6d8-c4706e280a27",
			propertyMapping: {
				name: "name",
				val: "val"
			}
		}).then((res) => {
			total.value = res.data[0].val
		})
	}

	/********************************************巡检人员*******************************************/
	let searchVal2 = ref(),
		tableData2 = [],
		tableList2 = ref([]);

	function fn4() {
		getApiFabric({
			apiCode: "4284e310-de69-43a6-b02b-61b44eb55b3f",
			pageIndex: 1,
			pageSize: 15,
			params: [{
				code: "postName",
				value: searchVal2.value
			}, {
				code: "pageIndex",
				value: 1
			}, {
				code: "pageSize",
				value: 15
			}, {
				code: "total",
				value: true
			}],
			propertyMapping: {
				岗位名称: "postName",
				检查内容: "checkContent",
				检查周期: "checkCycle",
				检查项目: "checkItemName",
				部门名称: "deptName",
			},
			total: true
		}).then((res) => {
			tableData2 = res.data;
			tableList2.value = tableData2.slice(0, 10);
			nextTick(() => {
				collapse.value.init()
			})
		})
	}

	function scrolltolower2() {
		if (tableList2.value.length < tableData2.length) {
			tableList2.value.push(...tableData2.slice(tableList2.value.length, tableList2.value.length + 10))
		}
	}

	function getServerData(refresh) {
		Promise.all([
			fn1(), fn2(), fn3(), fn4(), fn5()
		]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh();
				})
			}
		});
	}

	onShow(() => {
		getServerData();
	});

	onPullDownRefresh(() => {
		getServerData(true)
	});
</script>

<style lang="scss" scoped>
	.scroll-item {
		background: rgb(245, 249, 253);
		border-radius: 8rpx;
		padding: 20rpx;

		.title {
			width: 30%;
			text-align: right;
			margin-right: 10rpx;
		}

		.value {
			color: #999
		}
	}
</style>